<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.container {
				height: 100px;
				width: 700px;
				margin: 150px auto;
				border: 1px solid #000;
			}
			input {
				display: inline-block;
				font-family: "微软雅黑";
				width: 98%;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
	<div class="container">
			<table width="100%" style="text-align:center;">
				<tr>
					<td colspan="3"><input type="text" id="screen" /></td> 
					<td><input type="button" value="查询" id="cx"/></td>
				</tr>
				<h2 id="res"></h2>
				<script type="text/javascript">
			        var res=document.getElementById("res"),
				        cxs=document.getElementById("cx").onclick=function () {
				        var id=document.getElementById("screen").value;
				        if (id.length!=18||isNaN(Number(id.slice(0,16)))||id.slice(6,10)-0>2017||id.slice(10,12)-0>12||id.slice(10,12)-0<1||id.slice(12,14)-0>31||id.slice(12,14)-0<1||id.slice(6,10)-0<1897) {
					        res= "身份证输入有误！";
				            }
				        else{
					        var sex=id.charAt(16)%2;
					        if (sex==0) {
						        res="小姐";
					        } 
					        else{
						        res="先生";
					        }
					        res+="出生日期："+id.slice(6,10)+"年"+id.slice(10,12)+"月"+id.slice(12,14)+"日";
				        }
				        document.getElementById("res").innerHTML=res;
			        }
                </Script>
			</table>
		</div>	
	</body>
</html>
